<template>
    <div class="page">
        <div class="page_header" style="display: flex;">
            <div style="flex: 1 1 auto">
                <el-form ref="searchForm" :model="searchForm" style="display: flex;">
                    <el-form-item prop="we_id">
                        <el-input v-model="searchForm.we_id" placeholder="用户id"></el-input>
                    </el-form-item>
                    <el-form-item prop="openid">
                        <el-input v-model="searchForm.openid" placeholder="openid"></el-input>
                    </el-form-item>
                    <el-form-item prop="nickname">
                        <el-input v-model="searchForm.nickname" placeholder="微信昵称"></el-input>
                    </el-form-item>

<!--                    <el-form-item prop="date">-->
<!--                        <el-date-picker-->
<!--                            v-model="searchForm.date"-->
<!--                            type="daterange"-->
<!--                            value-format="yyyy-MM-dd"-->
<!--                            range-separator="至"-->
<!--                            start-placeholder="开始日期"-->
<!--                            end-placeholder="结束日期">-->
<!--                        </el-date-picker>-->
<!--                    </el-form-item>-->
                </el-form>
            </div>
            <div style="flex:0 0 auto;">
                <el-button @click="$store.dispatch('tableReload')" type="primary">查询</el-button>
                <el-button @click="$store.dispatch('tableReset')">重置</el-button>
            </div>
        </div>
        <el-card class="page_body">
            <el-table
                height="10"
                class="page_body_table"
                :data="common.tableData"
                v-loading="common.loading"
                border
                stripe
                style="width: 100%">
                <el-table-column prop="proxy_id" width="80" label="代理id"></el-table-column>
                <el-table-column prop="we_id" width="80" label="用户id"></el-table-column>
                <el-table-column label="微信昵称">
                    <template slot-scope="scope">
                        <el-popover
                            placement="left"
                            title="推荐码"
                            trigger="hover">
                            <template #default>
                                <img :src="scope.row.proxy_code" style="width: 200px" />
                            </template>
                            <el-button type="text" slot="reference" @click="$refs.proxyDetail.init(scope.row.we_id)">{{scope.row.nickname}}</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="openid" label="openid" width="250"></el-table-column>
                <el-table-column prop="total" label="总佣金"></el-table-column>
                <el-table-column prop="total_withdraw" label="已提现"></el-table-column>
                <el-table-column prop="wallet" label="余额"></el-table-column>
                <el-table-column prop="user_count" label="推广人数"></el-table-column>
                <el-table-column prop="created_at" label="认证时间"></el-table-column>
            </el-table>
            <pagination class="page_body_pagination"></pagination>
        </el-card>
        <proxy-detail-dialog ref="proxyDetail" @refresh="$store.dispatch('tableReload')"></proxy-detail-dialog>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import Pagination from "../Pagination";
    import ProxyDetailDialog from "./Dialog/ProxyDetailDialog";
    export default {
        name: "Proxy",
        computed:{
            ...mapState(['common','laifei']),
        },
        components:{
            Pagination,
            ProxyDetailDialog,
        },
        data(){
            return{
                method:'post',
                url:'/api/laifei/settlement/proxy',
                searchForm:{
                    // work_no:'',
                    we_id:'',
                    openid:'',
                    nickname:'',
                    // date:[],
                },
            }
        },
        created() {
            this.$store.dispatch('pageInit', this);
        },

    }
</script>

<style scoped>

</style>
